<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM基础</title>
</head>

<body>
  <h1>DOM</h1>
  <p>DOM（Document Object Model——文档对象模型），可以简单理解为浏览器创建的节点树，每个节点
    有自己的属性和方法，可以通过 JavaScript 来操作这些属性、调用这些方法。</p>

  <img src="./image/DOM-tree.png" alt="DOM节点树">
  <p>DOM 节点分为以下几类：</p>
  <ul>
    <li>元素节点：HTML标签</li>
    <li>属性节点：HTML标签的属性</li>
    <li>文本节点：HTML标签中的文本内容</li>
    <br>
    <li> 文档：一个页面就是一个文档，DOM中用document表示</li>
    <li> 元素：页面中所有的标签都是元素，DOM中用element表示</li>
    <li> 节点：网页中所有内容都是节点，DOM中用node表示</li>
  </ul>
  <h1>DOM 操作</h1>
  <p>DOM 操作可以分为以下几类：</p>
  <ul>

    <li>获取元素：通过 JavaScript 获取 HTML 元素，包括元素节点、属性节点、文本节点等。</li>
    <li>修改元素：通过 JavaScript 修改 HTML 元素，包括元素节点、属性节点、文本节点等。



    </li>
    <li>创建元素：通过 JavaScript 创建 HTML 元素，包括元素节点、属性节点、文本节点等。

    </li>
    <li>删除元素：通过 JavaScript 删除 HTML 元素，包括元素节点、属性节点、文本节点等。</li>
  </ul>

  <h3>案例1</h3>
  <h4>1. 获取元素</h4>
  <p id="demo">我是被获取的元素</p>
  <h4>2. 修改元素</h4>
  <p id="demo2">我是被修改的元素</p>
  <h4>3. 创建元素</h4>
  <p id="demo3">我是被创建的元素</p>
  <h4>4. 删除元素</h4>
  <p id="demo4">我是被删除的元素</p>
  <h4>5. 事件</h4>
  <p id="demo5">我是事件元素点击</p>
  <button id="demo6">双击点击</button>

  <div>
    <h3>注意</h3>
    <p>改变元素内容</p>
    element.innerText; // 改变文本，不识别HTML，渲染text <br>
    element.innerHTML; // 改变文本，但识别HTML，渲染html<br>
    注：element为元素名
    <p>改变表单属性</p>
    input.value = 'text'; // 修改表单内容 <br>
    btn.disabled = true; // 将btn（按钮）禁用 <br>
    注：btn为自己定义的按钮名称



    <p> 修改元素样式（驼峰命名）</p>
    element.style.backgroundColor = 'pink' ; // 修改element的背颜色为pink色 <br>
    注：此处权重比CSS高


    <p>修改元素样式（类命名）</p>
    element.className = '类名'; // 给要改的目标添加类

    <br>

    注：是类名不是类选择器

    <p>操作属性值</p>
    element.getAttribute('属性名'); // 获取属性值 <br>

    element.setAttribute('属性名','值'); // 设置属性值 <br>

    element.removeAttribute('属性名'); // 删除属性值 <br>






    <p></p>

  </div>

</body>

<script>
  // 案例1
  function fn() {
    // 1. 获取元素
    var x = document.getElementById("demo");
    console.log(x);

    // 2. 修改元素
    var x = document.getElementById("demo2");
    x.innerHTML = "我被修改了";
    x.style.backgroundColor = "red";
    // 3. 创建元素
    var x = document.getElementById("demo3");
    var y = document.createElement("p");
    y.innerHTML = "<div style='color:red'>我是新创建的元素 </div>";
    x.appendChild(y);
    // 4. 删除元素
    var x = document.getElementById("demo4");
    x.remove();
    // 5. 事件
    var x = document.getElementById("demo5");
    x.onclick = function () {
      alert("你点击了我");
    }
    var x = document.getElementById("demo6");
    x.ondblclick = function () {
      alert("你双击了我");
    }

  }
  fn();






</script>

</html>